<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统——首页</title>
<link rel="stylesheet" type="text/css" href="../extjs2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../extjs2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs2.0/ext-all.js"></script>
<script type="text/javascript" src="../extjs2.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../extjs2.0/ext/themeChange.js"></script>
</head>
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
		var root = new Ext.tree.TreeNode({
			text : '系统参数',
			url : '../about.jsp',
			expanded : true//默认展开根节点
		});
		var node1 = new Ext.tree.TreeNode({
			text : '用户管理',
			url : '../../pages/system/sys_users.jsp'
		});
		var node2 = new Ext.tree.TreeNode({
			text : '菜单管理',
			url : '../../pages/system/sys_menu.jsp'
		});
		var node3 = new Ext.tree.TreeNode({
			text : '菜单类型管理',
			url : '../../pages/system/sys_menutype.jsp'
		});
		var node4 = new Ext.tree.TreeNode({
			text : '角色管理',
			url : '../../pages/system/sys_roles.jsp'
		});
		var node5 = new Ext.tree.TreeNode({
			text : '权限管理',
			url : '../../pages/system/sys_popedom.jsp'
		});
		var node6 = new Ext.tree.TreeNode({
			text : '用户组管理',
			url : '../../pages/system/sys_userstype.jsp'
		});
		root.appendChild(node1);
		root.appendChild(node2);
		root.appendChild(node3);
		root.appendChild(node4);
		root.appendChild(node5);
		root.appendChild(node6);
		var menu = new Ext.tree.TreePanel({
			border : false,
			root : root,
			hrefTarget : 'mainContent',
			listeners : {
				click : function(node,e){
					mainPanel.load({
						url:node.attributes.url,
						callback : function(){
							mainPanel.setTitle(node.text);
						},
						scripts: true
					});
				}
			}
			,
			tbar : [
				'皮肤选择：',
				{
					xtype : 'themeChange',
					width : 80,
					listWidth : 80
				},
				'->'
			]
		});
		new Ext.Viewport({
			title : 'Ext.Viewport示例',
			layout:'border',//表格布局
			items: [{
				title : '${users.username},您好！欢迎登录后台管理系统',
				collapsible: true,
				contentEl : 'topDiv',
				region: 'north',//指定子面板所在区域为north
				height: 100
			},{
				title : '功能菜单',
				items : menu,
				split:true,
				collapsible: true,
				region:'west',//指定子面板所在区域为west
				width: 150
			},{
				title: '系统说明',
				contentEl : 'aboutDiv',
				collapsible: true,
				id : 'mainContent',
				region:'center'//指定子面板所在区域为center
			}]
		});
		var mainPanel = Ext.getCmp('mainContent');
	
	/*	
		
	var proxy = new Ext.data.HttpProxy( {   
        url : 'allSysMenutype.action' 
    });   
    // 定义reader   
        var reader = new Ext.data.JsonReader( {
        	root : 'results',   
	        totalProperty : 'totalCount', 
	        id : 'id'
        }, [ {   
            name : 'id'  
        }, {   
            name : 'name'  
        }, {   
            name : 'remark'
        }, {   
            name : 'state'
        }])   
        // 构建Store   
        var store = new Ext.data.Store( {   
            proxy : proxy,   
            reader : reader   
        });   
        // 载入   
        store.load();   
  
        // create the grid   
        var grid = new Ext.grid.GridPanel( {   
            store : store,   
            columns : [ {   
                header : "Login Name",   
                width : 110,   
                dataIndex : 'id'
            }, {   
                header : "Password",   
                width : 120,   
                dataIndex : 'name'
            }, {   
                header : "Type",   
                width : 120,   
                dataIndex : 'remark'
            }, {   
                header : "Type",   
                width : 120,   
                dataIndex : 'state'
            }],   
            renderTo : 'gr',   
            width : 540,   
            height : 200   
        });  
  	
  		store.on('load',function(ds){
		   var count = ds.getTotalCount(); //on load以后才有数据
		}); 
		*/
	});
</script>
<body>
<div id="gr">
</div>
<div id='aboutDiv' style='height:96%;width:100%'>
<table style="width: 100%; height: 100%" border=0>
	<tr>
		<td align=center>
		<div style="width: 300px; height: 200px; overflow: auto;" align=left>
		<p>菜单</p>
		菜单编号
		菜单
		</div>
		</td>
	</tr>
</table>
</div>

<div id='topDiv' style='height:96%;width:100%'>
<table style="width: 100%; height: 100%" border=0>
	<tr>
		<td align=center>
		<div style="width: 300px; height: 200px; overflow: auto;" align=left>
		<p>菜单
		菜单编号
		菜单
		</div>
		</td>
	</tr>
</table>
</div>

</body>
</html>